import React, { Component } from 'react'
import axios from '../../utils/myaxios'

import './searchCenter.css'


export default class searchCenter extends Component {
    state = {
        value: '',
        searchResult:[]
    };
    inputChange=(e) => {
        this.setState({
            value:e.currentTarget.value
        })
    }
    goBack=(params) => {
        window.history.back()
    }
    
    handleClick=() => {
        axios.get('goods/search',{params:{
            query:this.state.value
        }}).then(res=>{
            this.setState({
                searchResult:res.goods
            })
            console.log(res)
        }).catch(err=>console.log(err))
    }
    render() {
        return (
            <div style={{ background: '#fff', width: '100%', minHeight: '100vh' }}>
                {/* 首页标题开始 */}
                <section className="searchCenterTitle">
                    <i className="iconfont icon-zuojiantou" onClick={this.goBack}></i>
                    <h1>搜索中心</h1>
                </section>
                {/* 首页标题结束 */}
                {/* 搜索框开始 */}
                <section className="searchInput">
                    <i className="iconfont icon-sousuo"></i>
                    <input type="text" value={this.state.value} onChange={this.inputChange}  />
                    <button onClick={this.handleClick}>搜索</button>
                </section>
                {/* 搜索框结束 */}
                {/* 搜索内容开始 */}
                <section className="searchContent">
                    {this.state.searchResult.map(val=>{
                        return(
                            <div className="searchContentItem" key={val.goods_id}>
                                <img src={val.goods_small_logo} alt=""/>
                                <p>{val.goods_name}</p>
                            </div>
                        )
                    })}
                </section>
                {/* 搜索内容结束 */}
            </div>
        )
    }
}
